html, body {
    margin: 0;
    padding: 0;
    background-color: black
}
/* body{width:256px;} */
.callpage{
    /* display: flex; */
    margin: 1rem;
    padding: .3rem;
    width: 290px;
    display: grid;
    /* grid-row: 2fr 8fr 3fr; */
    grid-gap: .51rem;
    background-color: white;
    border-radius: .3rem
    }
    
.topbar{
    display:  grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    /* font-size: 8px; */
    /* justify-content: center; */
    text-align: center;
}
.topitem{font-size: .08rem;}

    
.currentnumber{
    /* text-align: center; */
    /* padding: 0px 10px; */
    /* text-align: center; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-content: center; */
    /* align-items: center; */
    /* align-self: center; */
    /* width: 100%; */
    margin-top: 20px;
    width:100%;
    text-align: center;
}
.tipbutton{
    width: 100px;
    text-align: center;
    margin: 0 auto;
    margin-top: -5px;
    color: blue;
    font-size: .8rem;
}
.buttons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:1rem;
    margin:0rem 1.4rem;
    /* padding: 1rem; */
    }
    
.button{
    width: 60px;height: 60px;
    border-radius: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
    
    font-size: 2rem;
    font-weight: 300;
    background-color: #E6E6E6;
}
.button:hover{background-color: grey;}
.star{
    font-size: 3rem;
    /* align-self: flex-end; */
    /* align-content: flex-end */
    /* vertical-align: bottom; */
    align-items: flex-end;
    /* padding-top: 1rem; */
}
.call{
    grid-row: 5 / 5;
    grid-column: 2 / 2;
    font-size: 2.2rem;
    background-color: #1fbf11;
    color: white;
}
    
.clear{
    background-color: white;
    grid-row:5/5 ;
    grid-column: 3/3;
    font-size: 1.5rem;
    font-weight: 400
}
    
.bottomItems{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    font-size: .6rem;
    text-align: center;
    height: 8vh;
    margin-top: 10px;
    /* background-color: grey; */
    /* justify-content: flex-end; */
    align-content: center;
}

.bottomItems >.cur{
    color: blue;
}    


/*! debug.css | MIT License | zaydek.github.com/debug.css */
/* 移除开始的这个/即可开启css debug模式 */
/*:not(path):not(g) {
	color:                    hsla(210, 100%, 100%, 0.9) !important;
	background:               hsla(210, 100%,  50%, 0.5) !important;
	outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
	box-shadow: none !important;
}

/* 说明 */
/*******
1.设置透明背景，方便重叠元素查看（颜色更深）
2.去掉阴影 界面更简洁 
3.outline 方便查看元素边界，不占用空间

*:是指所有元素
*：not(x):not(y)是指除了X元素和y之外
********/